<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>My Cart</title>
    <link rel="stylesheet" href="css/bootstrap.min.css">
    <link rel="stylesheet" href="css/address.css">
    <script src="js/jquery-3.3.1.min.js"></script>
</head>
<body>
    <div class="container-fluid">
       
        <!-- main -->
        <div class="row" id="main">
            <div class="col-md-12">
                <div class="col-md-12" style="margin:2rem 0;">
                    <h2>Invoice Page</h2>
                </div>
                <div class="col-md-12">
                    <div class="col-md-2">
                        <span class="tit">Full Name:</span>
                        <span id="fullname">c332</span>
                    </div>
                    <div class="col-md-4">
                        <span class="tit">Company:</span>
                        <span id="companyname">NA</span>
                    </div>
                </div>
                <div class="col-md-12">
                    <span class="tit">Address line 1:</span>
                    <span id="address1">OXford ,England ,Untited king</span>
                </div>
                <div class="col-md-12">
                    <span class="tit">Address line 2:</span>
                    <span id="address2">OXford ,England ,Untited king</span>
                </div>
                <div class="col-md-12">
                    <div class="col-md-2">
                        <span class="tit">City:</span>
                        <span id="city">OXford</span>
                    </div>
                    <div class="col-md-2">
                        <span class="tit">Region:</span>
                        <span id="region">OXford</span>
                    </div>
                    <div class="col-md-2">
                        <span class="tit">Country:</span>
                        <span id="country">OXford</span>
                    </div>
                </div>
                <div class="col-md-12">
                    <span class="tit">Postcode:</span>
                    <span id="postcode">OXford</span>
                </div>

                <div class="col-md-12" style="margin:1rem 0;" id="orderlist">
                    <p>2 x The Creature Choir HK$ 117</p>
                    <p>2 x The Creature Choir HK$ 117</p>
                    <p>2 x The Creature Choir HK$ 117</p>
                </div>
                <div class="col-md-12" style="margin:1rem 0;">
                    <span>Total Price:HK$ <span id="totalprice">117</span></span>
                </div>
            </div>
        </div>

        <div class="row">
            <div class="col-md-12" align="center">
                <p>Thanks for ordering.  Your books will be delivered within 7 working days.</p>

                <button type="button" class="btn btn-default" id="btn_ok">OK</button>
            </div>
        </div>

    </div>


    <script>
        $(function(){
            //API URL
            var apiurl="http://localhost:8080";

            initdata();

            //initdata
            function initdata(){
                var user_address=JSON.parse(sessionStorage.getItem("user_address"));
                var book_cart=sessionStorage.getItem("book_cart");

                $("#fullname").text(user_address.fullname);
                $("#companyname").text(user_address.companyname);
                $("#address1").text(user_address.address1);
                $("#address2").text(user_address.address2);
                $("#city").text(user_address.city);
                $("#region").text(user_address.region);
                $("#country").text(user_address.country);
                $("#postcode").text(user_address.postcode);

                var currentuser=JSON.parse(sessionStorage.getItem("book_user"));
                if(currentuser==undefined || currentuser==null){
                    var book_cart=sessionStorage.getItem("book_cart");
                    if(book_cart==null || book_cart==undefined){
                        
                    }else{
                        book_cart=JSON.parse(book_cart);
                        inithtml(book_cart);
                    }
                }else{
                    $.ajax({
                        url: apiurl+"/Cart.php",
                        type: "POST",
                        dataType: "json",
                        success: function (data) {
                            if(data.code==0){
                                inithtml(data.data);
                            }else{
                                alert(data.msg);
                            }
                        }
                    });
                }
                
            }

            function inithtml(list){
                var orderlist=$("#orderlist");
                orderlist.html("");
                var html="";
                for(var i=0;i<list.length;i++){
                    str='<p>'+list[i].Quantity+' x '+list[i].name+' HK$ '+list[i].price+'</p>';
                    html+=str;
                }
                orderlist.html(html);
            }

            //to home
            $("#btn_ok").click(function(){
                window.location.href="index.html";
            });
        })
    </script>
</body>
</html>